<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ name: 'base' }">仓库系统</el-breadcrumb-item>
        <el-breadcrumb-item>出库记录</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="together-content">
      <!-- 搜索表单 -->
      <div class="search-form">
        <el-form :inline="true" label-width="90px" style="width: 100%">
          <!-- 搜索输入框 -->
          <el-form-item>
            <el-input v-model="formInline.keyword" placeholder="单据号/备注" clearable />
          </el-form-item>

          <!-- 客户选择框 -->
          <el-form-item label="客户">
            <el-input v-model="formInline.consumerName" placeholder="选择客户" clearable />
          </el-form-item>


          <!-- 时间范围选择 -->
          <el-form-item label="日期">
            <el-date-picker v-model="formInline.dateRange" type="datetimerange" range-separator="-"
              start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" style="width: 340px" clearable />
          </el-form-item>

          <el-form-item label="业务">
            <el-select style="width: 200px" v-model="formInline.type">
              <el-option label="请选择" value="" />
              <el-option label="销售出库" :value="1" />
              <el-option label="采购退货" :value="2" />
              <el-option label="调拨出库" :value="3" />
              <el-option label="盘亏出库" :value="4" />
              <el-option label="其他出库" :value="0" />
            </el-select>
          </el-form-item><br/><br/>

          <!-- 业务人员 -->
          <el-form-item label="业务人员：">
            <el-select style="width: 200px" v-model="formInline.staffNo">
              <el-option label="请选择" value="" />
              <el-option label="仓库-小衣" value="S1001" />
              <el-option label="仓库-小三" value="S1003" />
              <el-option label="仓库-小五" value="S1005" />
              <el-option label="仓库-小七" value="S1007" />
              <el-option label="仓库-小九" value="S1009" />
            </el-select>
          </el-form-item>

          <!-- 查询按钮 -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 分割线 -->
      <el-divider style="margin: 10px 0" />

      <!-- 表格操作按钮 -->
      <div class="operate-buttons">
        <el-button type="primary" style="height: 25px" @click="router.push({ name: 'editOutBound' })">新增</el-button>
        <el-button plain style="height: 25px">审核</el-button>
        <el-button plain style="height: 25px">打印</el-button>
        <el-button plain style="height: 25px">导入</el-button>
        <el-button plain style="height: 25px">对单</el-button>
      </div>
      <br />

      <!-- 表格数据 -->
      <div class="table">
        <el-table :data="outboundList" style="width: 100%;" border empty-text="暂无出库记录" show-summary sum-text="总计"
         v-loading="loading" @selection-change="handleSelectionChange">
          <el-table-column type="selection" />
          <el-table-column fixed prop="code" label="单据编号" width="150" header-align="center" align="center" />
          <el-table-column label="业务类型" width="120" header-align="center" align="center">
            <template #default="{ row }">
              {{ showOutboundType(row.type) }}
            </template>
          </el-table-column>
          <el-table-column prop="totalQuantity" label="数量" width="80" header-align="center" align="center" />
          <el-table-column prop="totalMoney" label="金额(元)" width="120" header-align="center" align="center" />
          <el-table-column prop="customerName" label="客户" width="200" header-align="center" align="center" />
          <el-table-column prop="staffName" label="业务员" width="100" header-align="center" align="center" />
          <el-table-column prop="auditorName" label="审核人" width="100" header-align="center" align="center" />
          <el-table-column label="状态" width="120" align="center">
            <template #default="{ row }">
              {{ showOutboundStatus(row.status) }}
            </template>
          </el-table-column>
          <el-table-column prop="printNumber" label="打印次数" width="100" header-align="center" align="center" />

          <el-table-column fixed="right" label="操作" min-width="300" header-align="center" align="center">
            <template #default="scope">
              <el-button link type="info" size="small"
                @click="router.push({ name: 'editOutBound', params: { id: scope.row.id } })">编辑</el-button>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div><br />

      <!-- 分页 -->
      <div class="page-div" v-if="pageInfo != null">
        <el-pagination :current-page="pageNum" :page-size="pageSize" :total="pageInfo.total"
          @current-change="changePage" layout="total, ->, prev, pager, next, jumper" background />
      </div>
    </div>

  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { ref, inject, onMounted } from "vue";
import { useRouter } from 'vue-router'
// import { ElMessage } from 'element-plus'
let axios = inject("axios")
const router = useRouter()
// 搜索表单
const formInline = ref({
  keyword: "",
  consumerCode: '',
  consumerName: '',
  type: "", 
  staffNo: "",
  dateRange: [],
});

//出库单表格数据
let outboundList = ref([]);
//分页相关数据  - page
let pageInfo = ref(null);
let pageNum = ref(1), pageSize = ref(2);

const shortcuts = [
  {
    text: "最近7天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近30天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
];

const loading = ref(false);

//顶部表单搜索查询  - search
function onSubmit() {
  if (loading.value) return;
  loading.value = true;

  console.log(formInline.value);
  axios.post('/xyy/outbound/page', {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    //搜索表单中的信息
    keyword: formInline.value.keyword,
    beginTime: formInline.value.dateRange == null ? null : formInline.value.dateRange[0],
    endTime: formInline.value.dateRange == null ? null : formInline.value.dateRange[1],
    type: formInline.value.type,
    staffNo: formInline.value.staffNo
  }).then(res => {
    pageInfo.value = res.data.pageInfo;
    outboundList.value = res.data.pageInfo ? res.data.pageInfo.list : null
    console.log("pageInfo---:", pageInfo);
  }).finally(() => {
    loading.value = false;
  })
}

// 分页信息
// const pageInfo = { total: 50 }


const showOutboundStatus = (status) => {
  let res = '';
  switch (status) {
    case 0: res = "已打回"; break;
    case 1: res = "已创建"; break;
    case 2: res = "已提交"; break;
    case 3: res = "已审核"; break;

  }
  return res;
}
const showOutboundType = (type) => {
  let res = '';
  switch (type) {
    case 0: res = "其他出库"; break;
    case 1: res = "销售出库"; break;
    case 2: res = "采购退货"; break;
    case 3: res = "调拨出库"; break;
    case 4: res = "盘盈出库"; break;
  }
  return res;
}

const changePage = (now) => {
  pageNum.value = now;
   onSubmit();
}
onMounted(() => {
  onSubmit();
})
</script>

<style scoped>
/* 通用样式同原文件 */
.search-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

:deep(.el-form--inline .el-form-item) {
  margin-bottom: 0 !important;
  margin-right: 12px;
}

:deep(.el-input),
:deep(.el-date-editor) {
  width: 180px;
}

:deep(.el-date-editor[type="datetimerange"]) {
  width: 340px !important;
}

.operate-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
  flex-wrap: wrap;
}

.dialog-content {
  background-color: #f9f9fb;
  padding: 24px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
  padding: 20px 0;
  border-top: 1px solid #e4e7ed;
}

.dialog-footer .el-button {
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 6px;
}
</style>